<%- include header.ejs%>
<script>
    var username = '<%= user.name%>'
</script>
<script src="/javascripts/go-debug.js" type="text/javascript" ></script>
<script src="/javascripts/mind.js" type="text/javascript"></script>
<style type="text/css">
    td{
        width: 20px;
        height: 20px;
    }
</style>

    <div style="margin: 10px auto;width: 900px;height: auto">
        <button class="btn btn-success btn-sm"  id="SaveButton" onclick="save()">保存</button>
        <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal"  id="InviteButton">邀请</button>
        <button class="btn btn-danger btn-sm"  id="LeaveButton" style="visibility: hidden">离开</button>
        <button class="btn btn-default btn-sm" id="downloadPdf" style="float: right;margin-left: 5px" onclick="download()">导出pdf</button>
        <div class="btn-group" style="float: right">
            <button type="button" class="btn btn-default btn-sm">切换分布</button>
            <button type="button" class="btn btn-default btn-sm dropdown-toggle"
                    data-toggle="dropdown">
                <span class="caret"></span>
                <span class="sr-only">切换分布</span>
            </button>
            <ul class="dropdown-menu" role="menu" style="min-width: 80px">
                <li><a href="javascript:changeLayoutLeft()">左侧分布</a></li>
                <li><a href="javascript:changeLayoutRight()">右侧分布</a></li>
                <li><a href="javascript:changeLayoutBottom()">下侧分布</a></li>
                <li><a href="javascript:changeLayoutLeftright()">左右分布</a></li>
            </ul>
        </div>
        <div class="btn-group" style="float: right;margin: 0 5px">
            <button type="button" class="btn btn-default btn-sm">颜色</button>
            <button type="button" class="btn btn-default btn-sm dropdown-toggle"
                    data-toggle="dropdown">
                <span class="caret"></span>
                <span class="sr-only">改变颜色</span>
            </button>
            <table  class="dropdown-menu" role="menu" style="border-radius: 0;height: 80px;padding: 10px">
                <tr>
                    <td style="background-color: #007bff;"></td>
                    <td style="background-color: #6610f2;"></td>
                    <td style="background-color: #6f42c1;"></td>
                    <td style="background-color: #e83e8c;"></td>
                    <td style="background-color: #dc3545;"></td>
                    <td style="background-color: #924517;"></td>
                    <td style="background-color: #ffc107"></td>
                    <td style="background-color: #28a745"></td>
                </tr>
                <tr>
                    <td style="background-color: #20c997;"></td>
                    <td style="background-color: #17a2b8;"></td>
                    <td style="background-color: #ffff99;"></td>
                    <td style="background-color: #ff9999"></td>
                    <td style="background-color: #99ff99"></td>
                    <td style="background-color: #99ffcc"></td>
                    <td style="background-color: #9999ff"></td>
                    <td style="background-color: #17a2b8"></td>
                </tr>
                <tr>
                    <td style="background-color: #ffc107;"></td>
                    <td style="background-color: #dc3545;"></td>
                    <td style="background-color: #fd7e14"></td>
                    <td style="background-color: #ccffff;"></td>
                    <td style="background-color: #ff99cc"></td>
                    <td style="background-color: #99ffff"></td>
                    <td style="background-color: #ccffff"></td>
                    <td style="background-color: #f8f9fa;"></td>
                </tr>
            </table>
        </div>
        <div class="btn-group" style="float: right;">
            <button type="button" class="btn btn-default btn-sm">字体大小</button>
            <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
                <span class="sr-only">切换字体大小</span>
            </button>
            <ul class="dropdown-menu" role="menu" id="fontslt" style="min-width: 80px;">
            </ul>
        </div>
        <div class="btn-group" style="float: right;margin-right: 5px;">
            <button type="button" class="btn btn-default btn-sm">字体样式</button>
            <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
                <span class="sr-only">切换字体样式</span>
            </button>
            <ul class="dropdown-menu" role="menu" id="fontfamily" style="min-width: 100px;">
            </ul>
        </div>
        <div id="chpaform" style="display:none;float: right;margin-right: 5px;">
            <div class="form-inline">
                <button id="cancel" class="btn btn-default btn-sm" style="margin-right: -6px" onclick="FormHidden()">取消</button>
                <input type="text" id="parentnum" class="form-control" style="width: auto;height: 30px;" placeholder="输入父节点编号" onfocus="this.style.borderColor='#cccccc'">
                <button id="ok" class="btn btn-default btn-sm" style="margin-left: -6px">确定</button>
            </div>
        </div>
    </div>

    <div id="myDiagramDiv" style="width:900px; height:600px; background-color:#fcf5de;margin:0 auto;"></div>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">邀请协作</h4>
                </div>
                <div class="modal-body">
                    <input id="name" type="text" placeholder="请填写被邀请者的名字" class="form-control"  />
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" id="InviteButton" onclick="invite()">邀请</button>
                </div>
            </div>
        </div>
    </div>

    <div  class="modal fade" id="sysModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel"><span id="member"></span></h4>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">知道了</button>
                </div>
            </div>
        </div>
    </div>
</article>
</div>
<script src = "/javascripts/html2canvas.min.js" type="text/javascript"></script>
<script src = "/javascripts/jspdf.debug.js" type="text/javascript"></script>
</body>
</html>
